<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-CSS3新增nth-child选择器</title>
    <style>
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* nth-child(n) 从0开始，每次加1，往后计算，这里面必须是n，不能是其他的字母，相当于选择了所有的孩子 */
        /* ol li:nth-child(n) {
            background-color: deeppink;
        } */
        ol li:nth-child(3n) {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>
</html>
<!-- 
    nth-child(n)选择某个父元素的一个或者多个特定的子元素
    1.n可以是数字，关键字和公式
    2.n如果是数字，就是选择第n个子元素，里面数字从1开始...
    3.n可以是关键字：even偶数；odd奇数
    4.n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
    公式               取值
    2n                 偶数（相当于even）
    2n+1               奇数（相当于odd）
    5n                 5的倍数
    n+5                从第5个开始（包含第5个）到最后
    -n+5               前5个（包含第5个）
 -->